<template>
	<view>
		<form v-if="status.status == 3 || !status.status || status.status == 0">
			<fui-empty v-if="status.status == 3" title="入驻失败" color="red" :descr="status.reason"></fui-empty>
			<view class="form-box">
				<view class="form-item">
					<view class="f1">姓名<text style="color:red"> *</text></view>
					<view class="f2"><input type="text" name="name" v-model="from.legal_person_name" placeholder="请填写姓名"
							placeholder-style="color:#888"></input></view>
				</view>
				<view class="form-item">
					<view class="f1">身份证号<text style="color:red"> *</text></view>
					<view class="f2"><input v-model="from.id_card" type="text" name="name" placeholder="请填写身份证"
							placeholder-style="color:#888"></input></view>
				</view>
				<view class="form-item flex-col" style="border-bottom:0">
					<view class="f1">身份证正面照<text style="color:red"> *</text></view>
					<view class="f2">
						<view v-for="(item, index) in from.id_card_front_images" :key="index" class="layui-imgbox">
							<view class="layui-imgbox-close" @tap="removeimg" :data-index="index"
								data-field="id_card_front_images">
								<image style="display:block" src="/static/img/ico-del.png"></image>
							</view>
							<view class="layui-imgbox-img">
								<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
							</view>
						</view>
						<view class="uploadbtn"
							:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
							@tap="uploadimg" data-field="id_card_front_images" data-pernum="1"
							v-if="from.id_card_front_images.length == 0"></view>
					</view>
				</view>
				<view class="form-item flex-col" style="border-bottom:0">
					<view class="f1">身份证反面照<text style="color:red"> *</text></view>
					<view class="f2">
						<view v-for="(item, index) in from.id_card_back_images" :key="index" class="layui-imgbox">
							<view class="layui-imgbox-close" @tap="removeimg" :data-index="index"
								data-field="id_card_back_images">
								<image style="display:block" src="/static/img/ico-del.png"></image>
							</view>
							<view class="layui-imgbox-img">
								<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
							</view>
						</view>
						<view class="uploadbtn"
							:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
							@tap="uploadimg" data-field="id_card_back_images" data-pernum="1"
							v-if="from.id_card_back_images.length==0"></view>
					</view>
				</view>
				<view class="form-item">
					<view class="f1">银行卡号<text style="color:red"> *</text></view>
					<view class="f2"><input v-model="from.account_no" type="text" name="name" placeholder="请填写银行卡号"
							placeholder-style="color:#888"></input></view>
				</view>
				<view class="form-item flex-col" style="border-bottom:0">
					<view class="f1">银行卡照片<text style="color:red"> *</text></view>
					<view class="f2">
						<view v-for="(item, index) in from.bank_card_photo_images" :key="index" class="layui-imgbox">
							<view class="layui-imgbox-close" @tap="removeimg" :data-index="index"
								data-field="bank_card_photo_images">
								<image style="display:block" src="/static/img/ico-del.png"></image>
							</view>
							<view class="layui-imgbox-img">
								<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
							</view>
						</view>
						<view class="uploadbtn"
							:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
							@tap="uploadimg" data-field="bank_card_photo_images" data-pernum="1"
							v-if="from.bank_card_photo_images.length==0"></view>
					</view>
				</view>

				<view class="form-item">
					<view class="f1">预留手机号<text style="color:red"> *</text></view>
					<view class="f2"><input v-model="from.bank_cell_phone" type="number" maxlength="11" name="name"
							placeholder="请填写手机号" placeholder-style="color:#888"></input></view>
				</view>
				<view class="form-item">
					<view class="f1">户籍地址<text style="color:red"> *</text></view>
					<view class="f2"><input v-model="from.residence_address" type="text" name="name" placeholder="请填写地址"
							placeholder-style="color:#888"></input></view>
				</view>
				<view class="form-item">
					<view class="f1">身份证有效期<text style="color:red"> *</text></view>
					<view class="f2" @click="tipShow('legal_person_lic_stt')"><input disabled
							v-model="from.legal_person_lic_stt" type="text" name="name" placeholder="请填写有效期"
							placeholder-style="color:#888"></input></view>
				</view>
				<view class="form-item">
					<view class="f1">身份证失效期<text style="color:red"> *</text></view>
					<view class="f2" @click="tipShow('legal_person_lic_ent')"><input disabled
							v-model="from.legal_person_lic_ent" type="text" name="name" placeholder="请填写失效期"
							placeholder-style="color:#888"></input></view>
				</view>
				<!-- <view class="form-item">
					<view class="f1">结算人户籍地址<text style="color:red"> *</text></view>
					<view class="f2"><input type="text" name="name"  placeholder="请填写银行卡号"
							placeholder-style="color:#888"></input></view>
				</view> -->
				<view class="form-item flex-col" style="border-bottom:0">
					<view class="f1">协议图片<text style="color:red"> *</text></view>
					<view class="f2">
						<view v-for="(item, index) in from.agreement_img_urls" :key="index" class="layui-imgbox">
							<view class="layui-imgbox-close" @tap="removeimg" :data-index="index"
								data-field="agreement_img_urls">
								<image style="display:block" src="/static/img/ico-del.png"></image>
							</view>
							<view class="layui-imgbox-img">
								<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
							</view>
						</view>
						<view class="uploadbtn"
							:style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
							@tap="uploadimg" data-field="agreement_img_urls" data-pernum="1"
							v-if="from.agreement_img_urls.length==0"></view>
					</view>
				</view>
			</view>
			<view class="btn">
				<fui-button @click="submit" radius="100rpx" text="确认" background="#ff6e00"></fui-button>
			</view>
			<view style="height:50rpx"></view>
		</form>
		<view class="status" v-if="status.status == 1">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_news_3x.png" title="入驻成功" color="#19ad18"></fui-empty>
		</view>
		<view class="status" v-if="status.status == 2">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_news_3x.png" title="入驻中" color="#ff6e00" descr="请耐心等待!"></fui-empty>
		</view>
		<fui-date-picker :show="show" type="3" @change="change" @cancel="cancel"></fui-date-picker>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				show: false,
				pre_url: app.globalData.pre_url,
				pic: [],
				from: {
					legal_person_name: '',
					id_card: '',
					id_card_front: '',
					id_card_front_image: '',
					id_card_front_images: [],
					id_card_back: '',
					id_card_back_image: '',
					id_card_back_images: [],
					account_no: '',
					bank_card_photo: '',
					bank_card_photo_images: [],
					bank_card_photo_image: '',
					agreement_img: '',
					agreement_img_url: '',
					agreement_img_urls: [],
					bank_cell_phone: '',
					residence_address: '',
					legal_person_lic_stt: '',
					legal_person_lic_ent: '',
					merchant_order_sn: ''
				},
				type: '',
				status:''
			};
		},
		onLoad() {
			this.getSearchAccount()
		},
		methods: {
			getSearchAccount() {
				let that = this
				app.get('ApiFubei/searchAccount', {
					needinit: 0
				}, function(res) {
					console.log(res)
					if(res.status == 1){
						that.status = res.data
						that.from = that.status.data
					}
				});
 
			},
			tipShow(type) {
				this.type = type
				this.show = type
			},
			change(e) {
				if (this.type == 'legal_person_lic_stt') {
					this.from.legal_person_lic_stt = e.result
				} else {
					this.from.legal_person_lic_ent = e.result
				}
				this.show = false
			},
			cancel() {
				this.show = false
			},
			uploadimg: function(e) {
				var that = this;
				var pernum = parseInt(e.currentTarget.dataset.pernum);
				if (!pernum) pernum = 1;
				var field = e.currentTarget.dataset.field
				var pics = that[field]
				if (!pics) pics = [];
				app.chooseImage(function(urls) {
					for (var i = 0; i < urls.length; i++) {
						pics.push(urls[i]);
					}
					for (let key in that.from) {
						if (field == key) {
							that.from[key] = pics
						}
					}
					that.siurceId(field, pics)
				}, pernum);
			},
			removeimg: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index
				var field = e.currentTarget.dataset.field
				for (let key in that.from) {
					if (field == key) {
						that.from[key] = that.from[key].splice(index, 1)
					}
				}
				console.log(field)
				if (field == 'id_card_front_images') {
					var pics = that.from.id_card_front_images
					pics.splice(index, 1);
					that.from.id_card_front_images = pics;
				} else if (field == 'id_card_back_images') {
					var pics = that.from.id_card_back_images
					pics.splice(index, 1);
					that.id_card_back_images = pics;
				} else if (field == 'agreement_img_urls') {
					var pics = that.from.agreement_img_urls
					pics.splice(index, 1);
					that.from.agreement_img_urls = pics;
				}else{
					var pics = that.from.bank_card_photo_images
					pics.splice(index, 1);
					that.from.bank_card_photo_images = pics;
				}
			},
			siurceId(type, pics) {
				let that = this
				if (type == 'id_card_front_images' || type == 'id_card_back_images') {
					app.post('ApiFubei/upload', {
						type: 'idCard',
						url: pics[0]
					}, function(res) {
						console.log(res)
						if (type == 'id_card_front_images') {
							that.from.id_card_front = res.resource_id
						} else {
							that.from.id_card_back = res.resource_id
						}
					});
				} else {
					app.post('ApiFubei/upload', {
						type: 'bankCard',
						url: pics[0]
					}, function(res) {
						console.log(res)
						that.from.bank_card_photo = res.resource_id
					});
				}
			},
			submit() {
				for (let key in this.from) {
					let keys = ''
					if (Array.isArray(this.from[key])) {
						keys = key.slice(0, -1)
					}
					if (keys) {
						this.from[keys] = this.from[key][0]
					}

				}
				app.post('ApiFubei/addAccount', {
					...this.from
				}, function(res) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					console.log(res)
					if (res.status == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				});
			}
		}
	};
</script>
<style scoped>
	radio {
		transform: scale(0.6);
	}

	checkbox {
		transform: scale(0.6);
	}

	.form-box {
		padding: 2rpx 24rpx 0 24rpx;
		background: #fff;
		margin: 24rpx;
		border-radius: 10rpx
	}

	.form-item {
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee
	}

	.form-item .f1 {
		color: #222;
		width: 200rpx;
		flex-shrink: 0
	}

	.form-item .f2 {
		display: flex;
		align-items: center
	}

	.form-box .form-item:last-child {
		border: none
	}

	.form-box .flex-col {
		padding-bottom: 20rpx
	}

	.form-item input {
		width: 100%;
		border: none;
		color: #111;
		font-size: 28rpx;
		text-align: right
	}

	.form-item textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx 0;
		border: none;
	}

	.form-item .upload_pic {
		margin: 50rpx 0;
		background: #F3F3F3;
		width: 90rpx;
		height: 90rpx;
		text-align: center
	}

	.form-item .upload_pic image {
		width: 32rpx;
		height: 32rpx;
	}

	.savebtn {
		width: 90%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-radius: 48rpx;
		color: #fff;
		font-weight: bold;
		margin: 0 5%;
		margin-top: 60rpx;
		border: none;
	}

	.ggtitle {
		height: 60rpx;
		line-height: 60rpx;
		color: #111;
		font-weight: bold;
		font-size: 26rpx;
		display: flex;
		border-bottom: 1px solid #f4f4f4
	}

	.ggtitle .t1 {
		width: 200rpx;
	}

	.ggcontent {
		line-height: 60rpx;
		margin-top: 10rpx;
		color: #111;
		font-size: 26rpx;
		display: flex
	}

	.ggcontent .t1 {
		width: 200rpx;
		display: flex;
		align-items: center;
		flex-shrink: 0
	}

	.ggcontent .t1 .edit {
		width: 40rpx;
		height: 40rpx
	}

	.ggcontent .t2 {
		display: flex;
		flex-wrap: wrap;
		align-items: center
	}

	.ggcontent .ggname {
		background: #f55;
		color: #fff;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative
	}

	.ggcontent .ggname .close {
		position: absolute;
		top: -14rpx;
		right: -14rpx;
		background: #fff;
		height: 28rpx;
		width: 28rpx;
		border-radius: 14rpx
	}

	.ggcontent .ggnameadd {
		background: #ccc;
		font-size: 36rpx;
		color: #fff;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-left: 10rpx;
		position: relative
	}

	.ggcontent .ggadd {
		font-size: 26rpx;
		color: #558
	}

	.ggbox {
		line-height: 50rpx;
	}


	.layui-imgbox {
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		position: relative;
	}

	.layui-imgbox-img {
		display: block;
		width: 200rpx;
		height: 200rpx;
		padding: 2px;
		border: #d3d3d3 1px solid;
		background-color: #f6f6f6;
		overflow: hidden
	}

	.layui-imgbox-img>image {
		max-width: 100%;
	}

	.layui-imgbox-repeat {
		position: absolute;
		display: block;
		width: 32rpx;
		height: 32rpx;
		line-height: 28rpx;
		right: 2px;
		bottom: 2px;
		color: #999;
		font-size: 30rpx;
		background: #fff
	}

	.uploadbtn {
		position: relative;
		height: 200rpx;
		width: 200rpx
	}


	.clist-item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding: 20rpx 30rpx;
	}

	.radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
		margin-right: 30rpx
	}

	.radio .radio-img {
		width: 100%;
		height: 100%;
		display: block
	}

	.freightitem {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx
	}

	.freightitem .f1 {
		color: #666;
		flex: 1
	}

	.detailop {
		display: flex;
		line-height: 60rpx
	}

	.detailop .btn {
		border: 1px solid #ccc;
		margin-right: 10rpx;
		padding: 0 16rpx;
		color: #222;
		border-radius: 10rpx
	}

	.detaildp {
		position: relative;
		line-height: 50rpx
	}

	.detaildp .op {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 10rpx
	}

	.detaildp .op .btn {
		background: rgba(0, 0, 0, 0.4);
		margin-right: 10rpx;
		padding: 0 10rpx;
		color: #fff
	}

	.detaildp .detailbox {
		border: 2px dashed #00a0e9
	}

	.uni-popup-dialog {
		width: 300px;
		border-radius: 5px;
		background-color: #fff;
	}

	.uni-dialog-title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}

	.uni-dialog-button-group {
		display: flex;
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 14px;
	}

	.uni-button-color {
		color: #007aff;
	}

	.stockwarning {
		position: absolute;
		right: 0rpx;
		bottom: 0;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: red;
	}

	.stockwarning image {
		margin-right: 10rpx
	}

	.btn {
		margin: 24rpx;
	}
	.status{
		margin-top: 200rpx;
	}
	::v-deep .fui-empty__title{
		font-weight: bold !important;
	}
</style>